<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello world组件</title>
  <script src="../react.js"></script>
  <script src="../react-dom.js"></script>
  <script src="../browser.min.js"></script>
  <script src="../babel.min.js"></script>
  <style type="text/css">
    #container {
      padding: 50px;
      background-color: #eee;
    }
    #container h1{
      font-size: 20px;
      color: #0080a8;
    }
  </style>
</head>
<body>
  <div id="container">
  </div>
  <script type="text/babel">
    var HelloWorld = React.createClass({
      render: function() {
        return (
          <div>
            <h1>Hello, {this.props.greetTarget}</h1>
          </div>
        )
      }
    })
    // function HelloWorld(props) {
    //   return <h1>Hello, {this.props.greetTarget}</h1>
    // }

    var destination = document.querySelector('#container')
    ReactDOM.render(
      <div>
        <HelloWorld greetTarget="Tyler"/>
        <HelloWorld greetTarget="Nancy"/>
        <HelloWorld greetTarget="Jacket"/>
      </div>,
      destination
    )

    
  </script>
</body>
</html>